<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">

<head>

<%@ include file="/WEB-INF/include/meta.jsp"%>
<%@ include file="/WEB-INF/include/css.jsp"%>
<link href="${ctx.resource}/css/credit-mall.css" rel="stylesheet">
<title>订单详情</title>

</head>
<body>
	<div class="page-group">
		<div class="page page-current">
			<div class="bar bar-footer">
				<a href="${ctx.host}/credit-mall/products" class="other-button">逛逛别的</a>
				<a href="${ctx.host}/profile/credit-orders/${creditOrder.id}" class="order-list-button">查看订单</a>
			</div>

			<div class="content">
				<div class="trading-result">
					<c:if test="${creditOrder.type.coupon}">
						<!-- 虚拟产品 -->
						<div style="padding: .75rem 0;">
							<i class="icon icon-success"></i>恭喜您，兑换成功
						</div>
						<!-- 虚拟产品 结束 -->
					</c:if>

					<c:if test="${creditOrder.type.product }">
						<!-- 实体产品  -->
						<div class="clearfix transaction-code">
							<i class="icon icon-success"></i>
							<div>
								订单状态：${creditOrder.status.description }
								<p style="font-size: .7rem; color: #3d3d3d; margin: 0;">
									<c:if test="${empty creditOrder.shippingOffice}">
										暂无物流信息
									</c:if>
									<c:if test="${not empty creditOrder.shippingOffice}">
										${creditOrder.waybillCode}：${creditOrder.shippingOffice}
									</c:if>
								</p>
							</div>
						</div>
						<!-- 实体产品 -->
					</c:if>
				</div>

				<c:if test="${creditOrder.type.coupon }">
					<div class="trading-details">
						<div class="list-block media-list" style="margin: .75rem 0;">
							<ul style="padding: 0 .75rem .75rem;">
								<li class="item-content">
									<div class="item-media">
										<div class="cover">
											<img src="${cloud.prod}/${creditOrder.product.cover}" class="product-cover">
										</div>
									</div>
									<div class="item-inner">
										<div class="item-title-row">
											<div class="item-title">
												${creditOrder.product.name }
												<p style="margin: 0; font-size: .6rem; color: #3d3d3d;">（${creditOrder.effectiveEndDate}之前使用）</p>
											</div>
										</div>
										<div class="item-subtitle">
											<p>单价：${creditOrder.unitPrice } 积分</p>
											<p>数量：${creditOrder.amount }</p>
											<p>总价： ${creditOrder.price}积分</p>
										</div>
									</div>
								</li>
								<li class="item-content" style="margin-top: .5rem">
									<div class="credit-coupon">
										<c:forEach items="${creditOrder.couponCodes}" var="code">
											<input type="text" value="${code}" readOnly>
											<!-- <button class="button coupon-button">复制券码</button> -->
										</c:forEach>
									</div>
								</li>
							</ul>
						</div>
					</div>

					<div class="product-introduction">
						<div class="content-block no-margin">
							<h4>商品简介</h4>
							<p>${creditOrder.product.summary }</p>
							<h4>兑换流程</h4>
							<p>
								首先，按下…就跟你在其他剁手网上差不多的流程。<br /> 就是这样，你知道的。
							</p>
							<h4>注意事项</h4>
							<p>等待载入等待载入等待载入，等待载入等待载入等待载入，等待 载入等待载入等待载入等待载入。</p>
						</div>
					</div>
					<!-- 虚拟产品兑换记录 结束 -->
				</c:if>

				<c:if test="${creditOrder.type.product }">
					<!-- 实体产品兑换 开始 -->
					<div class="list-block result-address">
						<div class="item-content" style="font-size: .75rem; color: #303030;">
							<span class="left" style="letter-spacing: 2px;">收货人：</span>
							<p class="no-margin">${creditOrder.contactName }${creditOrder.contactPhone }</p>
						</div>
						<div class="item-content" style="font-size: .65rem; color: #737373;">
							<span class="left">收货地址：</span>
							<p class="no-margin">${creditOrder.province}${creditOrder.city }${creditOrder.region }${creditOrder.address }${creditOrder.zipCode }</p>
						</div>
					</div>

					<div class="trading-details">
						<div class="list-block media-list no-margin">
							<ul>
								<li class="item-content">
									<div class="item-media">
										<div class="cover">
											<img src="${cloud.prod}/${creditOrder.product.cover}" class="product-cover">
										</div>
									</div>
									<div class="item-inner">
										<div class="item-title-row">
											<div class="item-title">${creditOrder.product.name }</div>
										</div>
										<div class="item-subtitle">
											<p>单价：${creditOrder.unitPrice } 积分</p>
											<p>数量：${creditOrder.amount }</p>
											<p>总价： ${creditOrder.price }积分</p>
										</div>
									</div>
								</li>
							</ul>
							<div class="shipping-detail">
								<div class="item-content" style="font-size: .65rem; color: #606060;">
									<span class="left">配送方式：</span>
									<p class="no-margin" style="color: #303030;">快递 包邮</p>
								</div>
								<div class="item-content" style="font-size: .65rem; color: #606060;">
									<span class="left">成交日期:</span>
									<p class="no-margin" style="color: #303030;">${creditOrder.exchangeTime }</p>
								</div>
								<div class="item-content" style="font-size: .65rem; color: #606060;">
									<span class="left">订单编号：</span>
									<p class="no-margin" style="color: #303030;">${creditOrder.code }</p>
								</div>
							</div>
						</div>
					</div>
					<!-- 实体 产品兑换 结束 -->
				</c:if>

			</div>
		</div>
	</div>
	<%@ include file="/WEB-INF/include/script.jsp"%>

</body>
</html>